import {replaceByObj} from "./xUtil.js";

export default class xSearch {
	
    /* 定义变量 开始*/  
    $root;
    $container;
    $head;
    $main;
    $ul;
    $input;
    
    vJdAll = null;
    vJdMatch =null;
    vPlaceholder ='';
    vClickId = 'click.HE24'+parseInt(Math.random()*1000000000,10);

    vTmplBase =`
        <div data-key="cntr" class="{{class}}">
             <div data-key="head">                
             </div>
             <div data-key="main">
                 <ul data-key="ul">
                 </ul>
             </div>
        </div>`;

    vTmplLi= '<li>{{item}}</li>'
    vTmplItem =`<a {{link}} data-key="item" data-code="{{code}}">
                     {{icon}}
                    <span>{{name}}</span>
                </a>`;
    vTmplNo  ='<span>没有找到相关的项</span>';
    vTmplHead = '<input data-key="input" placeholder={{place}}><i class="iconfont icon-search"></i>';
 
    /* 定义变量 结束*/
   
    // 构造函数
    constructor(cfg){
    	this.vJdAll = cfg.data;
    	this.vPlaceholder = cfg.placeholder;
        this.$root = $('#' + cfg.el);
        this.$root.html(this.vTmplBase.replace('{{class}}', !cfg.style ? 'search-style-1' : cfg.style));
    	this.renderInit();
    };


    /* 渲染区块 开始 */
    renderInit() {
        this.$container = this.$root.find('[data-key="cntr"]');
        this.$head = this.$root.find('[data-key="head"]');
        this.$main = this.$root.find('[data-key="main"]');
        this.$ul = this.$root.find('[data-key="ul"]');
        this.$input = this.$root.find('[data-key="input"]');
        this.renderHead();
        this.$main.hide();

        // event 处理 注册    
        this.$container.on('input', '[data-key="input"]', this.evInput.bind(this));
        this.$container.on('click', '[data-key="input"]', this.evInputClick.bind(this));

    };

    renderHead(){
        this.$head.html(this.vTmplHead.replace('{{place}}',this.vPlaceholder?this.vPlaceholder:''));
    }

    renderUl(){
        let lis='';
        if(this.vJdMatch.length>0){
            for(let data of this.vJdMatch){
                lis += this.vTmplLi.replace('{{item}}',this.renderItem(data));
            }
        }else{
            lis = this.vTmplLi.replace('{{item}}',this.vTmplNo);
        }

        this.$ul.html(lis);
    };

    renderItem(data){
    	return replaceByObj(this.vTmplItem,{
    	    code:data.code,
            name:data.name,
            link:data.link?'href="'+data.link+'"':'',
            icon:data.icon?'<i class="iconfont '+data.icon+'"></i>':''
        })
    }


    /* 渲染区块 结束 */
   
    match(value){
    	this.vJdMatch =[];
    	if(value){
    		for(let d of this.vJdAll){
    		if(!!d.name.match(value) ||(!!d.title && d.title.match(value))) 
    		    this.vJdMatch.push(d);
    		}
    	}else{
    		this.vJdMatch = this.vJdAll;
    	}
    }
    
    evInput(e){
    	let value = e.target.value;
    	this.match(value);
    	this.renderUl();
    	this.$main.show();
    }
    
    evInputClick(e){
    	let value = e.target.value;
    	if(value == this.vPlaceholder){
    		e.target.value ='';
    		value ='';
    	}
    	this.match(value);
    	this.renderUl();
    	this.$main.show();
        //去掉重复注册
        $(document).unbind(this.vClickId);
        $(document).on(this.vClickId,this.evOffClick.bind(this));
    }


    evOffClick(e){
        // Off this container ;
       if(this.$container.find(e.target).length<1){
       	    this.renderHead();
            $(document).unbind(this.vClickId);
       	    this.$main.hide();
       }
    }

}